<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>Hexo 配置 Icarus 主题 | David 的博客</title><meta name="author" content="David"><meta name="copyright" content="David"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="本文讲述如何给 hexo 博客网站配置。 1. 安装环境说明 首先粘贴本教程测试使用的环境，如果在安装配置中，环境有差异，请酌情修改或调整参数．  1234567891011C:\JetBrain\WebStorm\MyBlog\blog-demo-03&gt;pnpm listLegend: production dependency, optional only, dev onlyhexo-s">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo 配置 Icarus 主题">
<meta property="og:url" content="https://blog.david-deng.cn/2025/01/05/other-%E9%9A%8F%E7%AC%94-icarus-%E4%B8%BB%E9%A2%98%E5%AE%89%E8%A3%85/index.html">
<meta property="og:site_name" content="David 的博客">
<meta property="og:description" content="本文讲述如何给 hexo 博客网站配置。 1. 安装环境说明 首先粘贴本教程测试使用的环境，如果在安装配置中，环境有差异，请酌情修改或调整参数．  1234567891011C:\JetBrain\WebStorm\MyBlog\blog-demo-03&gt;pnpm listLegend: production dependency, optional only, dev onlyhexo-s">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-4.png">
<meta property="article:published_time" content="2025-01-05T08:25:00.000Z">
<meta property="article:modified_time" content="2025-01-05T09:12:17.529Z">
<meta property="article:author" content="David">
<meta property="article:tag" content="笔记">
<meta property="article:tag" content="其他">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-4.png"><link rel="shortcut icon" href="/img/favicon.svg"><link rel="canonical" href="https://blog.david-deng.cn/2025/01/05/other-%E9%9A%8F%E7%AC%94-icarus-%E4%B8%BB%E9%A2%98%E5%AE%89%E8%A3%85/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>
    (() => {
      
    const saveToLocal = {
      set: (key, value, ttl) => {
        if (!ttl) return
        const expiry = Date.now() + ttl * 86400000
        localStorage.setItem(key, JSON.stringify({ value, expiry }))
      },
      get: key => {
        const itemStr = localStorage.getItem(key)
        if (!itemStr) return undefined
        const { value, expiry } = JSON.parse(itemStr)
        if (Date.now() > expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return value
      }
    }

    window.btf = {
      saveToLocal,
      getScript: (url, attr = {}) => new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.async = true
        Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
        script.onload = script.onreadystatechange = () => {
          if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
        }
        script.onerror = reject
        document.head.appendChild(script)
      }),
      getCSS: (url, id) => new Promise((resolve, reject) => {
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = url
        if (id) link.id = id
        link.onload = link.onreadystatechange = () => {
          if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
        }
        link.onerror = reject
        document.head.appendChild(link)
      }),
      addGlobalFn: (key, fn, name = false, parent = window) => {
        if (!false && key.startsWith('pjax')) return
        const globalFn = parent.globalFn || {}
        globalFn[key] = globalFn[key] || {}
        globalFn[key][name || Object.keys(globalFn[key]).length] = fn
        parent.globalFn = globalFn
      }
    }
  
      
      const activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      const activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }

      btf.activateDarkMode = activateDarkMode
      btf.activateLightMode = activateLightMode

      const theme = saveToLocal.get('theme')
    
          const mediaQueryDark = window.matchMedia('(prefers-color-scheme: dark)')
          const mediaQueryLight = window.matchMedia('(prefers-color-scheme: light)')
          
          if (theme === undefined) {
            if (mediaQueryLight.matches) activateLightMode()
            else if (mediaQueryDark.matches) activateDarkMode()
            else {
              const hour = new Date().getHours()
              const isNight = hour <= 6 || hour >= 18
              isNight ? activateDarkMode() : activateLightMode()
            }
            mediaQueryDark.addEventListener('change', () => {
              if (saveToLocal.get('theme') === undefined) {
                e.matches ? activateDarkMode() : activateLightMode()
              }
            })
          } else {
            theme === 'light' ? activateLightMode() : activateDarkMode()
          }
        
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
      }
    
      
    const detectApple = () => {
      if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
  
    })()
  </script><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false,"highlightFullpage":false,"highlightMacStyle":false},
  copy: {
    success: '复制成功',
    error: '复制失败',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: David","link":"链接: ","source":"来源: David 的博客","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'null',
  Snackbar: {"chs_to_cht":"已切换为繁体中文","cht_to_chs":"已切换为简体中文","day_to_night":"已切换为深色模式","night_to_day":"已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-left"},
  infinitegrid: {
    js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
    buttonText: '加载更多'
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: true,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Hexo 配置 Icarus 主题',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  isShuoshuo: false
}</script><style type="text/css">#toggle-sidebar {bottom: 80px}</style><meta name="generator" content="Hexo 7.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img text-center"><img src="/img/avatar.png" onerror="onerror=null;src='/img/loading.gif'" alt="avatar"/></div><div class="site-data text-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">27</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">28</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">28</div></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fas fa-compass"></i><span> 目录</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url(https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-4.png);"><nav id="nav"><span id="blog-info"><a class="nav-site-title" href="/"><span class="site-name">David 的博客</span></a><a class="nav-page-title" href="/"><span class="site-name">Hexo 配置 Icarus 主题</span></a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fas fa-compass"></i><span> 目录</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="post-info"><h1 class="post-title">Hexo 配置 Icarus 主题</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2025-01-05T08:25:00.000Z" title="发表于 2025-01-05 16:25:00">2025-01-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2025-01-05T09:12:17.529Z" title="更新于 2025-01-05 17:12:17">2025-01-05</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E7%AC%94%E8%AE%B0/Other/">Other</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">总字数:</span><span class="word-count">3.4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>14分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title=""><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">浏览量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="container post-content" id="article-container"><div id="post-outdate-notice" data="{&quot;limitDay&quot;:90,&quot;messagePrev&quot;:&quot;文章距离最近一次更新已经&quot;,&quot;messageNext&quot;:&quot;天，文章的内容可能已经过期。&quot;,&quot;postUpdate&quot;:&quot;2025-01-05 17:12:17&quot;}" hidden></div><p>本文讲述如何给 hexo 博客网站配置。</p>
<h2 id="1-安装环境说明"><a href="#1-安装环境说明" class="headerlink" title="1. 安装环境说明"></a>1. 安装环境说明</h2><ul>
<li>首先粘贴本教程测试使用的环境，如果在安装配置中，环境有差异，请酌情修改或调整参数．</li>
</ul>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">C:\<span class="title">JetBrain</span>\<span class="title">WebStorm</span>\<span class="title">MyBlog</span>\<span class="title">blog</span>-<span class="title">demo</span>-03&gt;<span class="title">pnpm</span> <span class="title">list</span></span></span><br><span class="line"><span class="function"><span class="title">Legend</span>: <span class="title">production</span> <span class="title">dependency</span>, <span class="title">optional</span> <span class="title">only</span>, <span class="title">dev</span> <span class="title">only</span></span></span><br><span class="line"><span class="function"></span></span><br><span class="line"><span class="function"><span class="title">hexo</span>-<span class="title">site</span>@0.0.0 <span class="title">Z</span>:\<span class="title">JetBrain</span>\<span class="title">WebStorm</span>\<span class="title">MyBlog</span>\<span class="title">blog</span>-<span class="title">demo</span>-03 (<span class="title">PRIVATE</span>)</span></span><br><span class="line"><span class="function"></span></span><br><span class="line"><span class="function"><span class="title">dependencies</span>:</span></span><br><span class="line"><span class="function">@<span class="title">babel</span>/<span class="title">preset</span>-<span class="title">env</span> 7.26.0       <span class="title">hexo</span>-<span class="title">generator</span>-<span class="title">index</span> 3.0.0     <span class="title">hexo</span>-<span class="title">renderer</span>-<span class="title">marked</span> 6.3.0</span></span><br><span class="line"><span class="function"><span class="title">babel</span>-<span class="title">plugin</span>-<span class="title">inferno</span> 6.7.2     <span class="title">hexo</span>-<span class="title">generator</span>-<span class="title">tag</span> 2.0.0       <span class="title">hexo</span>-<span class="title">renderer</span>-<span class="title">stylus</span> 3.0.1</span></span><br><span class="line"><span class="function"><span class="title">hexo</span> 7.3.0                     <span class="title">hexo</span>-<span class="title">log</span> 4.1.0                 <span class="title">hexo</span>-<span class="title">server</span> 3.0.0</span></span><br><span class="line"><span class="function"><span class="title">hexo</span>-<span class="title">generator</span>-<span class="title">archive</span> 2.0.0   <span class="title">hexo</span>-<span class="title">renderer</span>-<span class="title">ejs</span> 2.0.0        <span class="title">hexo</span>-<span class="title">theme</span>-<span class="title">icarus</span> 6.1.1</span></span><br><span class="line"><span class="function"><span class="title">hexo</span>-<span class="title">generator</span>-<span class="title">category</span> 2.0.0  <span class="title">hexo</span>-<span class="title">renderer</span>-<span class="title">inferno</span> 1.0.2    <span class="title">hexo</span>-<span class="title">theme</span>-<span class="title">landscape</span> 1.0.0</span></span><br></pre></td></tr></table></figure>

<h2 id="2-安装-Icarus-主题"><a href="#2-安装-Icarus-主题" class="headerlink" title="2. 安装 Icarus 主题"></a>2. 安装 Icarus 主题</h2><p>安装 Icarus 主题有两种方式:</p>
<ul>
<li>通过 npm 安装</li>
<li>通过 git clone 安装</li>
<li>通过压缩包安装</li>
</ul>
<h3 id="2-1-安装方式一：-通过-npm-安装"><a href="#2-1-安装方式一：-通过-npm-安装" class="headerlink" title="2.1. 安装方式一： 通过 npm 安装"></a>2.1. 安装方式一： 通过 npm 安装</h3><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -S hexo-theme-icarus hexo-renderer-inferno babel-plugin-inferno @babel/preset-env hexo-log</span><br></pre></td></tr></table></figure>

<h3 id="2-2-安装方式二：-通过-git-克隆安装"><a href="#2-2-安装方式二：-通过-git-克隆安装" class="headerlink" title="2.2. 安装方式二： 通过 git 克隆安装"></a>2.2. 安装方式二： 通过 git 克隆安装</h3><figure class="highlight apache"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">git</span> clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus --branch <span class="number">6</span>.<span class="number">1</span>.<span class="number">0</span> --depth <span class="number">1</span></span><br><span class="line"><span class="comment">#另外，你也可以使用下面的命令将Icarus安装为Git子模块(submodule)：</span></span><br><span class="line"><span class="attribute">git</span> submodule add https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus --branch <span class="number">6</span>.<span class="number">1</span>.<span class="number">0</span> --depth <span class="number">1</span></span><br></pre></td></tr></table></figure>

<p>安装 dependencies</p>
<figure class="highlight apache"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">npm</span> install -S semver@^<span class="number">7</span>.<span class="number">5</span>.<span class="number">4</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">npm</span> install --save bulma-stylus@<span class="number">0</span>.<span class="number">8</span>.<span class="number">0</span> hexo-component-inferno@^<span class="number">3</span>.<span class="number">1</span>.<span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">npm</span> install -S  hexo-renderer-inferno@^<span class="number">1</span>.<span class="number">0</span>.<span class="number">2</span></span><br></pre></td></tr></table></figure>

<h3 id="2-3-安装方式三：-通过压缩包安装"><a href="#2-3-安装方式三：-通过压缩包安装" class="headerlink" title="2.3. 安装方式三： 通过压缩包安装"></a>2.3. 安装方式三： 通过压缩包安装</h3><ul>
<li><p>进入项目</p>
<figure class="highlight gams"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><span class="keyword">$cd</span> blog</span></span><br><span class="line"><span class="meta"><span class="keyword">$pwd</span></span></span><br><span class="line">your_project_dir/blog</span><br></pre></td></tr></table></figure>

<p>项目目录结构如上节所示</p>
</li>
<li><p>找到对应的压缩包</p>
<ul>
<li>打开<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/ppoffice/hexo-theme-icarus/releases/">https://github.com/ppoffice/hexo-theme-icarus/releases/</a></li>
<li>找到对应的 release 版本，在对应的版本的 release notes 下面找到 Source code(targ.gz)</li>
</ul>
</li>
<li><p>下载<br>源代码包 Source code(tar.gz)</p>
</li>
<li><p>解压缩<br>将源码包解压到 themes&#x2F;icarus 目录下即可．</p>
</li>
<li><p>一键安装</p>
<ul>
<li><p>前提是你的电脑支持 curl, wget, grep 等命令，针对大多数 windows 用户，建议还是参考上面的步骤一步一步安装主题，对于 MacOs 和 windows 用户，可以使用如下命令一键安装</p>
</li>
<li><p>理解以上步骤，能更好地帮助你理解一键安装命令</p>
</li>
<li><p>这里将以上步骤压缩成一条命令</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">mkdir</span> themes/icarus</span><br><span class="line">curl -s https://api.github.com/repos/ppoffice/hexo-theme-icarus/releases/latest | grep tarball_url | <span class="built_in">cut</span> -d <span class="string">&#x27;&quot;&#x27;</span> -f 4 | wget -i - -O- | tar -zx -C themes/icarus --strip-components=1</span><br></pre></td></tr></table></figure>
</li>
<li><p>安装完成后,　 themes&#x2F;icarus 目录的结构如下所示</p>
</li>
</ul>
<figure class="highlight mipsasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">$tree -L <span class="number">2</span></span><br><span class="line">.</span><br><span class="line">├── _<span class="built_in">config</span>.landscape.yml</span><br><span class="line">├── _<span class="built_in">config</span>.yml</span><br><span class="line">├── db.<span class="keyword">json</span></span><br><span class="line"><span class="keyword"></span>├── node_modules</span><br><span class="line">├── package.<span class="keyword">json</span></span><br><span class="line"><span class="keyword"></span>├── package-lock.<span class="keyword">json</span></span><br><span class="line"><span class="keyword"></span>├── <span class="keyword">scaffolds</span></span><br><span class="line"><span class="keyword"></span>│   ├── draft.md</span><br><span class="line">│   ├── page.md</span><br><span class="line">│   └── post.md</span><br><span class="line">├── source</span><br><span class="line">│   └── _posts</span><br><span class="line">├── themes</span><br><span class="line">│   └── icarus</span><br><span class="line">└── yarn.lock</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="3-配置-Icarus-主题"><a href="#3-配置-Icarus-主题" class="headerlink" title="3. 配置 Icarus 主题"></a>3. 配置 Icarus 主题</h2><h3 id="3-1-启用主题"><a href="#3-1-启用主题" class="headerlink" title="3.1. 启用主题"></a>3.1. 启用主题</h3><p>与所有 Hexo 主题启用的模式一样。 当 克隆&#x2F;下载 完成后，打开 站点配置文件_config.yml， 找到 theme 字段，并将其值更改为 icarus</p>
<figure class="highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">theme:</span> icarus</span><br></pre></td></tr></table></figure>

<p>也可以使用 hexo 命令启用 icarus 主题</p>
<figure class="highlight arduino"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo config theme icarus</span><br></pre></td></tr></table></figure>

<h3 id="3-2-验证主题"><a href="#3-2-验证主题" class="headerlink" title="3.2. 验证主题"></a>3.2. 验证主题</h3><ul>
<li><p>首先启动 Hexo 本地站点</p>
<figure class="highlight axapta"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo <span class="keyword">server</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>当命令行输出中提示出：<br>INFO Hexo is running at <a target="_blank" rel="noopener external nofollow noreferrer" href="http://0.0.0.0:4000/">http://0.0.0.0:4000/</a>. Press Ctrl+C to stop.</p>
</li>
<li><p>此时即可使用浏览器访问 <a target="_blank" rel="noopener external nofollow noreferrer" href="http://localhost:4000/">http://localhost:4000</a>，检查站点是否正确运行。</p>
</li>
</ul>
<h3 id="3-3-配置作者资料卡"><a href="#3-3-配置作者资料卡" class="headerlink" title="3.3. 配置作者资料卡"></a>3.3. 配置作者资料卡</h3><p>你可以启用作者资料卡挂件来展示文章作者&#x2F;网站站长的信息。 资料卡的配置如下所示：</p>
<p><code>_config.icarus.yml</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">widgets:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">position:</span> <span class="string">left</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">profile</span></span><br><span class="line">    <span class="comment"># 作者名称</span></span><br><span class="line">    <span class="attr">author:</span> <span class="string">鹏叔</span></span><br><span class="line">    <span class="comment"># 作者头衔</span></span><br><span class="line">    <span class="attr">author_title:</span> <span class="string">A</span> <span class="string">GitHub</span> <span class="string">Octocat</span></span><br><span class="line">    <span class="comment"># 作者所在地/公司</span></span><br><span class="line">    <span class="attr">location:</span> <span class="string">GitHub</span> <span class="string">Inc.</span></span><br><span class="line">    <span class="comment"># 头像图片地址</span></span><br><span class="line">    <span class="attr">avatar:</span> <span class="string">&quot;https://octodex.github.com/images/hula_loop_octodex03.gif&quot;</span>    </span><br><span class="line">    <span class="comment"># 是否显示圆形头像</span></span><br><span class="line">    <span class="attr">avatar_rounded:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># Gravatar邮箱(如不设置`avatar`项)</span></span><br><span class="line">    <span class="attr">gravatar:</span></span><br><span class="line">    <span class="comment"># 关注按钮链接地址</span></span><br><span class="line">    <span class="attr">follow_link:</span> <span class="string">&quot;https://www.david-deng.cn&quot;</span></span><br><span class="line">    <span class="comment"># 社交媒体链接</span></span><br><span class="line">    <span class="attr">social_links:</span></span><br><span class="line">      <span class="attr">Github:</span></span><br><span class="line">        <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-github</span></span><br><span class="line">        <span class="attr">url:</span> <span class="string">&quot;https://github.com/david-deng-01&quot;</span></span><br></pre></td></tr></table></figure>

<p>需要注意的是：</p>
<ul>
<li><p>如果你希望使用 Gravatar 而不是 avatar 配置项作为头像图片，请在 gravatar 项填入 你的 Gravatar 邮箱地址并在 avatar 一项中留空；</p>
</li>
<li><p>social_links 可以采用如下两种格式：</p>
<ul>
<li><p>图标形式：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">链接名称</span>&gt;</span>:</span><br><span class="line">    icon: <span class="tag">&lt;<span class="name">FontAwesome5_图标的_HTML_class名称</span>&gt;</span></span><br><span class="line">    url: <span class="tag">&lt;<span class="name">链接的URL地址</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>文字形式：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">链接名称</span>&gt;</span>: <span class="tag">&lt;<span class="name">链接的URL地址</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h3 id="3-4-配置友站链接"><a href="#3-4-配置友站链接" class="headerlink" title="3.4. 配置友站链接"></a>3.4. 配置友站链接</h3><p>你可以使用友站链接挂件来展示外部网站的列表。 示例配置如下所示：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">widgets:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">position:</span> <span class="string">left</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">links</span></span><br><span class="line">    <span class="comment"># 友站名称与链接</span></span><br><span class="line">    <span class="attr">links:</span></span><br><span class="line">      <span class="attr">pengtech:</span> <span class="string">&quot;https://pengtech.net&quot;</span></span><br><span class="line">      <span class="attr">philoenglish:</span> <span class="string">&quot;https://philoenglish.com&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="3-5-配置最新文章"><a href="#3-5-配置最新文章" class="headerlink" title="3.5. 配置最新文章"></a>3.5. 配置最新文章</h3><p>使用如下挂件配置来开启最新文章挂件：</p>
<p><code>_config.icarus.yml</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">widgets:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">position:</span> <span class="string">right</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">recent_posts</span></span><br></pre></td></tr></table></figure>

<h3 id="3-6-配置文章归档"><a href="#3-6-配置文章归档" class="headerlink" title="3.6. 配置文章归档"></a>3.6. 配置文章归档</h3><p>使用如下挂件配置来开启文章归档挂件：</p>
<p><code>_config.icarus.yml</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">widgets:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">position:</span> <span class="string">right</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">archives</span></span><br></pre></td></tr></table></figure>

<h3 id="3-7-配置文章分类"><a href="#3-7-配置文章分类" class="headerlink" title="3.7. 配置文章分类"></a>3.7. 配置文章分类</h3><p>使用如下挂件配置来开启文章分类挂件：</p>
<p><code>_config.icarus.yml</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">widgets:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">position:</span> <span class="string">right</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">categories</span></span><br></pre></td></tr></table></figure>

<h3 id="3-8-配置文章标签"><a href="#3-8-配置文章标签" class="headerlink" title="3.8. 配置文章标签"></a>3.8. 配置文章标签</h3><p>使用如下挂件配置来开启文章标签挂件：</p>
<p><code>_config.icarus.yml</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">widgets:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">position:</span> <span class="string">right</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">tags</span></span><br><span class="line">    <span class="attr">order_by:</span> <span class="string">name</span> <span class="comment"># 可选项。按名称(name)或长度(length)来排序。加上`-`前缀来倒序排列。</span></span><br><span class="line">    <span class="attr">amount:</span> <span class="number">20</span> <span class="comment"># 可选项。最多显示的标签数量。留空以显示所有标签。</span></span><br><span class="line">    <span class="attr">show_count:</span> <span class="literal">true</span> <span class="comment"># 可选项。是否显示标签名称右侧的文章数量。</span></span><br></pre></td></tr></table></figure>

<h3 id="3-9-开启-shareThis-分享按钮"><a href="#3-9-开启-shareThis-分享按钮" class="headerlink" title="3.9. 开启 shareThis 分享按钮"></a>3.9. 开启 shareThis 分享按钮</h3><ol>
<li>访问 ShareThis 并点击页面上的“从分享按钮开始”(Start with Share Buttons)按钮。</li>
<li>在“选择分享按钮类型”(Choose type of sharing button)页面选择你需要的按钮类型。 不要启用”GDPR 规范工具“，否则可能会导致一些问题。 你也可以点击“自定义你的分享按钮”(Customize your share buttons)链接来进行按钮的进一步配置。 完成后点击“下一步”(Next)。</li>
<li>在”选择你的 CMS 平台“(Choose your CMS platform)页面选择”HTML“并点击”下一步“(Next)。</li>
<li>在“注册并获取代码”(Register and get the code!)页面输入邮箱和密码完成 ShareThis 的注册。</li>
<li>最后，从 HTML 代码段中复制 src 中的 URL 地址到分享按钮配置中。</li>
</ol>
<p>例如，下面的 ShareThis 代码：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script</span><br><span class="line">  type=<span class="string">&quot;text/javascript&quot;</span></span><br><span class="line">  src=<span class="string">&quot;https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&amp;product=inline-share-buttons&quot;</span></span><br><span class="line">  <span class="keyword">async</span>=<span class="string">&quot;async&quot;</span></span><br><span class="line">&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>对应下面的主题配置：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">share:</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">sharethis</span></span><br><span class="line">  <span class="attr">install_url:</span> <span class="string">https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&amp;product=inline-share-buttons</span></span><br></pre></td></tr></table></figure>

<h3 id="3-10-开启-follow-it"><a href="#3-10-开启-follow-it" class="headerlink" title="3.10. 开启 follow.it"></a>3.10. 开启 follow.it</h3><p>安装 hexo-generator-feed</p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-feed --save</span><br></pre></td></tr></table></figure>

<p>配置 feed, 参考 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/hexojs/hexo-generator-feed">https://github.com/hexojs/hexo-generator-feed</a></p>
<p>修改<code>_config.ym</code>l，配置 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://philoenglish.com/query/feed">feed</a> 如下</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">feed:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">atom</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">atom.xml</span></span><br><span class="line">  <span class="attr">limit:</span> <span class="number">20</span></span><br><span class="line">  <span class="attr">hub:</span></span><br><span class="line">  <span class="attr">content:</span></span><br><span class="line">  <span class="attr">content_limit:</span> <span class="number">140</span></span><br><span class="line">  <span class="attr">content_limit_delim:</span> <span class="string">&#x27; &#x27;</span></span><br><span class="line">  <span class="attr">order_by:</span> <span class="string">-date</span></span><br><span class="line">  <span class="attr">icon:</span> <span class="string">icon.png</span></span><br><span class="line">  <span class="attr">autodiscovery:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">template:</span></span><br></pre></td></tr></table></figure>

<p>按照如下步骤即可启用 follow.it 邮件订阅插件：</p>
<p>首先，使用诸如 hexo-generator-feed 此类的 Hexo 插件生成 你的 Hexo 网站的 RSS 源。</p>
<p>访问 follow.it 并在“向你的站点添加关注功能”(Add the follow feature to your site)下方的 输入框中填写 RSS 源的文件地址，例如<a target="_blank" rel="noopener external nofollow noreferrer" href="http://example.com/atom.xml%E3%80%82">http://example.com/atom.xml。</a> 然后，点击“下一步”(Next)。</p>
<p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://pengtech.net/images/hexo/follow-it-enter-feed-url.png"><img src="https://pengtech.net/images/hexo/follow-it-enter-feed-url.png" alt="follow it enter feed url"></a></p>
<p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://pengtech.net/images/hexo/follow-it-enter-feed-url.png">follow it enter feed url</a></p>
<p>点击“定义关注表单设计”(Define the follow form’s design)页面上的“继续”(Continue)按钮。</p>
<p>搜索 action&#x3D;并复制 action&#x3D;后双引号中的链接。 把你复制的 action 链接粘贴到挂件配置中的 action_url 设置项。 在那之后，点击“完成”(Done)。</p>
<h3 id="3-11-开启评论系统"><a href="#3-11-开启评论系统" class="headerlink" title="3.11. 开启评论系统"></a>3.11. 开启评论系统</h3><p>可以有多种选择，但是我一直使用的是 utterances，这次依然是 utterances</p>
<h4 id="3-11-1-utterances"><a href="#3-11-1-utterances" class="headerlink" title="3.11.1. utterances"></a>3.11.1. utterances</h4><p>安装指南在线预览<br>准备一个公开的 GitHub 仓库(Repository)。</p>
<p>访问 GitHub Apps - utterances 并点击”安装“(Install)。</p>
<p>GitHub 应用页 - utterances<br>GitHub 应用页 - utterances</p>
<p>(可选)如果你的账号下有组织账号，在下一页中选择需要安装 utterances 的用户。</p>
<p>选择用户 - utterances<br>选择用户 - utterances</p>
<p>在下一页面选择将 utterances 安装到”所有仓库“(All repositories)或是”选定的仓库“(Only select repositories)。 然后点击“安装”(Install)按钮。</p>
<p>选择仓库 - utterances<br>选择仓库 - utterances</p>
<p>若安装成功，网页将跳转到 utterances 官网。 你可以阅读每个的配置项的说明，并按照配置你的 utterances 安装。</p>
<p>完成配置后，转到页面上的”开启 utterances“(Enable Utterances)并从 utterances 的 HTML 代码中复制属性值到主题配置的对应配置项中。</p>
<p>获取代码 - utterances<br>获取代码 - utterances</p>
<p>例如下面的 utterances 代码：</p>
<p>utterances 安装代码</p>
<p>对应下面的主题配置：</p>
<p><code>_config.icarus.yml</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">comment:</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">utterances</span></span><br><span class="line">  <span class="attr">repo:</span> <span class="string">Your-GitHub-Username/Your-Public-Repo-Name</span></span><br><span class="line">  <span class="attr">issue_term:</span> <span class="string">pathname</span> <span class="comment"># 必填项，与issue_number二选一填写</span></span><br><span class="line">  <span class="attr">issue_number:</span> <span class="number">100</span> <span class="comment"># 必填项，与issue_term二选一填写，每篇文章对应一个issue，填写前需要手动创建issue</span></span><br><span class="line">  <span class="attr">label:</span> <span class="string">some-issue-label</span> <span class="comment"># 可选填</span></span><br><span class="line">  <span class="attr">theme:</span> <span class="string">github-light</span> <span class="comment"># 可选填</span></span><br></pre></td></tr></table></figure>

<h2 id="开启站内搜索"><a href="#开启站内搜索" class="headerlink" title="开启站内搜索"></a>开启站内搜索</h2><p>修改icarus配置文件_config.icarus.yml，</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">insight</span></span><br><span class="line">    <span class="comment"># Whether to include pages in the search results</span></span><br><span class="line">    <span class="attr">index_pages:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h2 id="4-支持夜间模式"><a href="#4-支持夜间模式" class="headerlink" title="4. 支持夜间模式"></a>4. 支持夜间模式</h2><p>参考 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.imaegoo.com/2020/icarus-night-mode-3/">https://www.imaegoo.com/2020/icarus-night-mode-3/</a></p>
<p>如何设置默认为night mode:</p>
<p>themes&#x2F;icarus&#x2F;source&#x2F;js&#x2F;imaegoo&#x2F;night.js</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">var</span> <span class="string">isNight</span> <span class="string">=</span> <span class="string">localStorage.getItem(&#x27;night&#x27;)</span> <span class="string">||</span> <span class="literal">true</span><span class="string">;</span></span><br><span class="line"><span class="string">var</span> <span class="string">nightNav;</span></span><br></pre></td></tr></table></figure>

<h2 id="5-添加相关文章推建"><a href="#5-添加相关文章推建" class="headerlink" title="5. 添加相关文章推建"></a>5. 添加相关文章推建</h2><p>相关文章推荐，每次都是手动写的，最近发现 hexo-related-popular-posts 可以自动生产相关文章推荐。但是这个已经有几年没有更新了，比较适合 next 等较早一批出现的 hexo 主题。网上搜索了一下，发现<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.huihongcloud.com/">ZhongHuihong</a>做了向 icarus 主题的适配 - 参考这篇文章 [hexo icarus 主题添加相关文章](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.huihongcloud.com/2021/10/02/hexo/hexo">https://www.huihongcloud.com/2021/10/02/hexo/hexo</a> icarus主题添加相关文章&#x2F;)。</p>
<p>这里为了防止网页找不到，结合 hexo-related-popular-posts 官方文档和上述文章将步骤重新整理一下。</p>
<h3 id="5-1-首先安装-hexo-related-popular-posts-依赖"><a href="#5-1-首先安装-hexo-related-popular-posts-依赖" class="headerlink" title="5.1. 首先安装 hexo-related-popular-posts 依赖"></a>5.1. 首先安装 hexo-related-popular-posts 依赖</h3><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-related-popular-posts --save</span><br></pre></td></tr></table></figure>

<h3 id="5-2-修改-icarus-主题源码"><a href="#5-2-修改-icarus-主题源码" class="headerlink" title="5.2. 修改 icarus 主题源码"></a>5.2. 修改 icarus 主题源码</h3><p>由于最新的 Icarus 使用 npm 安装的话是安装到 node_modules 下的，所以我们需要把主题弄到 themes 目录下。可以直接 git clone 一份到这个目录或者是复制出来，hexo 加载 themes 目录下的主题优先级是大于 node_modules 目录。</p>
<p>layout\common 目录下新增 related.jsx</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; <span class="title class_">Component</span> &#125; = <span class="built_in">require</span>(<span class="string">&quot;inferno&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> view = <span class="built_in">require</span>(<span class="string">&quot;hexo-component-inferno/lib/core/view&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">class</span> <span class="title class_">extends</span> <span class="title class_">Component</span> &#123;</span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; config, helper, page &#125; = <span class="variable language_">this</span>.<span class="property">props</span>;</span><br><span class="line">    <span class="keyword">const</span> &#123; __, popular_posts &#125; = helper;</span><br><span class="line">    <span class="keyword">let</span> relatedText = <span class="title function_">popular_posts</span>(&#123;&#125;, page);</span><br><span class="line">    <span class="keyword">if</span> (!relatedText || relatedText.<span class="property">length</span> == <span class="number">0</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card-content&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">h3</span>&gt;</span>相关文章<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">span</span> <span class="attr">dangerouslySetInnerHTML</span>=<span class="string">&#123;&#123;</span> <span class="attr">__html:</span> <span class="attr">relatedText</span> &#125;&#125;&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明<br>与其他主题不同，icarus 的 post 叫做 page，this.props 中是不包含 post 的。hexo-related-popular-posts 注册了 popular_posts 函数用于渲染相关文章，这个需要在 helper 加上。<br>hexo-related-popular-posts 生成的 html text 需要使用 dangerouslySetInnerHTML 设置，否则直接渲染出来的是带引号的。<br>下面是我编写的 related.jsx。</p>
</blockquote>
<p>修改 article.jsx<br>编写好了 related.jsx，就需要在 article.jsx 中修改了。需要引入自定义的 jsx 文件，并在合适的位置插入标签。</p>
<p>require.jsx</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Share</span> = <span class="built_in">require</span>(<span class="string">&#x27;./share&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Donates</span> = <span class="built_in">require</span>(<span class="string">&#x27;./donates&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Comment</span> = <span class="built_in">require</span>(<span class="string">&#x27;./comment&#x27;</span>);</span><br><span class="line">+ <span class="keyword">const</span> <span class="title class_">Related</span> = <span class="built_in">require</span>(<span class="string">&#x27;./related&#x27;</span>);</span><br></pre></td></tr></table></figure>

<p>插入相关文章标签</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">+ &#123;<span class="comment">/* Related articles */</span>&#125;</span><br><span class="line"></span><br><span class="line">+ &#123;!index ? <span class="language-xml"><span class="tag">&lt;<span class="name">Related</span> <span class="attr">config</span>=<span class="string">&#123;config&#125;</span> <span class="attr">page</span>=<span class="string">&#123;page&#125;</span> <span class="attr">helper</span>=<span class="string">&#123;helper&#125;/</span>&gt;</span></span> :<span class="literal">null</span>&#125;</span><br><span class="line"></span><br><span class="line">&#123;<span class="comment">/* Donate button */</span>&#125;</span><br><span class="line">&#123;!index ? <span class="language-xml"><span class="tag">&lt;<span class="name">Donates</span> <span class="attr">config</span>=<span class="string">&#123;config&#125;</span> <span class="attr">helper</span>=<span class="string">&#123;helper&#125;</span> /&gt;</span></span> : <span class="literal">null</span>&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>把它放在文章的尾部，捐赠的上方，!index 表示首页不出现。</p>
</blockquote>
<p>效果预览&amp;后记<br>如果有啥报错的话，记得 hexo clean 一下。</p>
<p>具体的样式可以自己微调，上述代码的改动效果如下。<br>hexo-related-popular-posts 生成的 div 有自带 class，可以自行添加 icarus&#x2F;source&#x2F;css&#x2F;style.styl 与修改 icarus&#x2F;include&#x2F;style 目录下的 style 进行样式的微调。</p>
<h2 id="6-添加-google-广告"><a href="#6-添加-google-广告" class="headerlink" title="6. 添加 google 广告"></a>6. 添加 google 广告</h2><p>注册 Google Adsense 账号<br>注册账号流程比较简单，入口在这里：Google Adsense<br>注册完成后,google 会提供一段广告脚本, 将他放到下面文件的头部位置</p>
<p>从脚本获取到 google adsense client_id 和 slot_id</p>
<p>修改icarus配置文件<code>_config.icarus.yml</code>， 配置google adsense <a target="_blank" rel="noopener external nofollow noreferrer" href="https://philoenglish.com/query/widget">widget</a>如下</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">widgets:</span></span><br><span class="line">  <span class="string">...</span></span><br><span class="line">  <span class="comment"># Where should the widget be placed, left sidebar or right sidebar</span></span><br><span class="line">        <span class="attr">position:</span> <span class="string">right</span></span><br><span class="line">        <span class="comment">#type: adsense</span></span><br><span class="line">        <span class="comment"># AdSense client ID</span></span><br><span class="line">        <span class="comment">#client_id: &#x27;ca-pub-zzzzzzz&#x27;</span></span><br><span class="line">        <span class="comment"># AdSense AD unit ID</span></span><br><span class="line">        <span class="comment">#slot_id: &#x27;yyyyyyyyyy&#x27;</span></span><br><span class="line">  <span class="string">...</span></span><br></pre></td></tr></table></figure>

<h2 id="7-hexo-Icarus主题优化"><a href="#7-hexo-Icarus主题优化" class="headerlink" title="7. hexo Icarus主题优化"></a>7. hexo Icarus主题优化</h2><p>[记 hexo icarus 主题优化 Google PageSpeed Insights 分数](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.huihongcloud.com/2021/10/17/hexo/%E8%AE%B0hexo">https://www.huihongcloud.com/2021/10/17/hexo/记hexo</a> icarus主题优化Google PageSpeed Insights分数&#x2F;)</p>
<h2 id="8-解决-SEO-LCP-问题"><a href="#8-解决-SEO-LCP-问题" class="headerlink" title="8. 解决 SEO LCP 问题"></a>8. 解决 SEO LCP 问题</h2><p>Hexo和icarus主题那些坑：打开速度太慢，google console长期报告 LCP问题，几乎每一个页面都有这个问题，</p>
<p>用PageSpeed <a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.philoenglish.com/query/Insight">Insights</a>测试了一下，主要是FontAwesome CDN，JSDelivr CDN，Google Fonts下载速度慢，严重影响性能。</p>
<p>解决办法：</p>
<p>找到_config.icarus.yml，在最后的providers，修改：全部修改为loli</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">providers:</span></span><br><span class="line">    <span class="comment"># Name or URL template of the JavaScript and/or stylesheet CDN provider</span></span><br><span class="line">    <span class="attr">cdn:</span> <span class="string">loli</span></span><br><span class="line">    <span class="comment"># Name or URL template of the webfont CDN provider</span></span><br><span class="line">    <span class="comment">#默认用的google</span></span><br><span class="line">    <span class="attr">fontcdn:</span> <span class="string">loli</span></span><br><span class="line">    <span class="comment"># Name or URL of the fontawesome icon font CDN provider</span></span><br><span class="line">    <span class="attr">iconcdn:</span> <span class="string">loli</span></span><br></pre></td></tr></table></figure>

<p>其次，找到themes&#x2F;icarus(主题)&#x2F;layout&#x2F;common&#x2F;head.jsx<br>注释掉：<br>default: fontcdn(‘Ubuntu:wght@400;600&amp;family&#x3D;Source+Code+Pro’,‘css2’)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fontCssUrl = &#123;</span><br><span class="line">    <span class="comment">// default: fontcdn(&#x27;Ubuntu:wght@400;600&amp;family=Source+Code+Pro&#x27;, &#x27;css2&#x27;),</span></span><br><span class="line">    <span class="attr">cyberpunk</span>: <span class="title function_">fontcdn</span>(<span class="string">&#x27;Oxanium:wght@300;400;600&amp;family=Roboto+Mono&#x27;</span>, <span class="string">&#x27;css2&#x27;</span>)</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>参考这篇文章 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://blog.csdn.net/m0_52549699/article/details/118249206">https://blog.csdn.net/m0_52549699/article/details/118249206</a></p>
<h2 id="8-参考文档"><a href="#8-参考文档" class="headerlink" title="8. 参考文档"></a>8. 参考文档</h2><p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://ppoffice.github.io/hexo-theme-icarus/uncategorized/icarus%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/">Icarus 快速上手</a></p>
<p>[hexo icarus 主题添加相关文章](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.huihongcloud.com/2021/10/02/hexo/hexo">https://www.huihongcloud.com/2021/10/02/hexo/hexo</a> icarus主题添加相关文章&#x2F;)</p>
<p>[记 hexo icarus 主题优化 Google PageSpeed Insights 分数](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.huihongcloud.com/2021/10/17/hexo/%E8%AE%B0hexo">https://www.huihongcloud.com/2021/10/17/hexo/记hexo</a> icarus主题优化Google PageSpeed Insights分数&#x2F;)</p>
<h2 id="相关文章"><a href="#相关文章" class="headerlink" title="相关文章"></a>相关文章</h2><p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://pengtech.net/hexo/blog_seo_optimize.html">Hexo博客搜索引擎优化</a><a target="_blank" rel="noopener external nofollow noreferrer" href="https://pengtech.net/hexo/hexo_advance_apply_next_theme.html">Hexo配置Next主题</a><a target="_blank" rel="noopener external nofollow noreferrer" href="https://pengtech.net/hexo/hexo_blog_comments.html">Hexo博客添加评论功能</a><a target="_blank" rel="noopener external nofollow noreferrer" href="https://pengtech.net/hexo/hexo_cli.html">Hexo命令详解</a><a target="_blank" rel="noopener external nofollow noreferrer" href="https://pengtech.net/hexo/hexo_mermaid_plugin.html">Hexo中插入mermaid图表</a></p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://blog.david-deng.cn">David</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://blog.david-deng.cn/2025/01/05/other-%E9%9A%8F%E7%AC%94-icarus-%E4%B8%BB%E9%A2%98%E5%AE%89%E8%A3%85/">https://blog.david-deng.cn/2025/01/05/other-随笔-icarus-主题安装/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow noreferrer" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来源 <a href="https://blog.david-deng.cn" target="_blank">David 的博客</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E7%AC%94%E8%AE%B0/">笔记</a><a class="post-meta__tags" href="/tags/%E5%85%B6%E4%BB%96/">其他</a></div><div class="post-share"><div class="social-share" data-image="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-4.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i>赞助</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://cdn.jsdelivr.net/gh/David-deng-01/images/blog/WeChatPay.jpg" rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img" src="https://cdn.jsdelivr.net/gh/David-deng-01/images/blog/WeChatPay.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://cdn.jsdelivr.net/gh/David-deng-01/images/blog/Alipay.jpg" rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img" src="https://cdn.jsdelivr.net/gh/David-deng-01/images/blog/Alipay.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></div><nav class="pagination-post" id="pagination"><a class="pagination-related full-width" href="/2024/03/18/other-leetcode-%E3%80%902024-03-18-LeetCode-%E5%88%B7%E9%A2%98-400%E9%81%93%E6%89%93%E5%8D%A1%E3%80%91/" title="LeetCode刷题400道打卡"><img class="cover" src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-9.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="info"><div class="info-1"><div class="info-item-1">上一篇</div><div class="info-item-2">LeetCode刷题400道打卡</div></div><div class="info-2"><div class="info-item-1">LeetCode 刷题 400 道打卡记录一下 LeetCode 刷题 400 道我的 LeetCode 主页    书山有路勤为径，学海无涯苦作舟。诸君共勉之！再接再厉吧！ 时间：2024-03-18  </div></div></div></a></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><a class="pagination-related" href="/2023/10/11/other-%E9%9A%8F%E7%AC%94-%E9%97%AE%E9%A2%98%E7%AC%94%E8%AE%B0/" title="问题笔记"><img class="cover" src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-9.png" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2023-10-11</div><div class="info-item-2">问题笔记</div></div><div class="info-2"><div class="info-item-1">遇到的问题&amp;解决方案【持续更新~】2023-09-16 笔记解决 MP4 视频转成 m3u8 格式的问题 需求描述： 现在需要批量将一些存放在文件夹下的 MP4 视频转成 m3u8 格式，其中视频存放的位置可能是多层文件夹下，m3u8 视频需要分门别类的存放  解决思路  使用 Python + ffmpeg 实现视频的转码 使用多线程加速视频的转码   遇到的问题  多个视频不能按照预设的顺序进行转码，前一个视频还没有完成，下一个视频就中断了前一个视频的转码 本机的性能不足，需要放在服务器上运行，但是服务器上的Linux环境导致运行出现一些没有预测到的问题   最终解决方案  不使用多线程运行 使用Python...</div></div></div></a><a class="pagination-related" href="/2023/05/05/Deep-Learning-Code-Note/" title="深度学习代码笔记-01"><img class="cover" src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-4.png" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2023-05-05</div><div class="info-item-2">深度学习代码笔记-01</div></div><div class="info-2"><div class="info-item-1">深度学习代码笔记-011. 配置环境1.1 Conda 任选其一（推荐后者）  Anaconda 安装 Miniconda 安装   1.2 Conda 常用命令123456789101112131415161718192021222324252627282930# 显示所有环境conda env list# 显示当前环境下的包conda list# 创建conda环境conda create -n 环境名 python=版本号# 删除conda环境conda remove -n 环境名 --all# 进入conda环境conda activate 环境名# 退出conda环境conda deactivate# 删除缓存conda clean -a -y# conda环境导出conda activate 环境名conda env export &gt; env.yaml# conda环境迁移conda env create -f env.yaml# conda国内源conda config --add channels...</div></div></div></a><a class="pagination-related" href="/2023/08/31/2023-08-31%20%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" title="2023-08-31 学习笔记"><img class="cover" src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-7.png" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2023-08-31</div><div class="info-item-2">2023-08-31 学习笔记</div></div><div class="info-2"><div class="info-item-1">2023-08-31 学习笔记1. 预训练语言模型的使用问题：如何使用预训练的语言模型在已有的数据集上进行微调？ 解决方案如下： 首先下载一个预训练语言模型，这里使用的是 cardiffnlp/twitter-xlm-roberta-base-sentiment-multilingual 可以直接在Hugging Face 上下载 预处理数据集(很关键！！)，数据集如果没有处理好，模型运行过程中容易报错，例如 3. 错误解决 中就出现了因为数据集没有处理好而导致的错误 加载模型和分词器 模型训练 模型评估  代码如下： 项目配置文件 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647# hydra 配置defaults:  - _self_ # 优先级最高, 会覆盖其他配置  - override hydra/hydra_logging: disabled # 禁用hydra日志, 会覆盖其他配置  - override hydra/job_logging:...</div></div></div></a><a class="pagination-related" href="/1978/01/01/hello-world/" title="Hello World"><img class="cover" src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-4.png" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 1978-01-01</div><div class="info-item-2">Hello World</div></div><div class="info-2"><div class="info-item-1">Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1hexo new &quot;My New Post&quot;  More info: Writing Run server1hexo server  More info: Server Generate static files1hexo generate  More info: Generating Deploy to remote sites1hexo deploy  More info: Deployment </div></div></div></a></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="/img/avatar.png" onerror="this.onerror=null;this.src='/img/loading.gif'" alt="avatar"/></div><div class="author-info-name">David</div><div class="author-info-description">Welcome to David's Blog</div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">27</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">28</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">28</div></a></div><a id="card-info-btn" target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/david-deng-01"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons"><a class="social-icon" href="https://github.com/david-deng-01" rel="external nofollow noreferrer" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://blog.csdn.net/David_0925" rel="external nofollow noreferrer" target="_blank" title="CSDN"><i class="fa fa-book-open"></i></a><a class="social-icon" href="tencent://AddContact/?fromId=45&amp;fromSubId=1&amp;subcmd=all&amp;uin=635647792&amp;website=www.oicqzone.com" rel="external nofollow noreferrer" target="_blank" title="QQ"><i class="fab fa-qq"></i></a><a class="social-icon" href="mailto:david-deng-0925@qq.com" rel="external nofollow noreferrer" target="_blank" title="Email"><i class="fas fa-envelope-open-text"></i></a></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%AE%89%E8%A3%85%E7%8E%AF%E5%A2%83%E8%AF%B4%E6%98%8E"><span class="toc-number">1.</span> <span class="toc-text">1. 安装环境说明</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%AE%89%E8%A3%85-Icarus-%E4%B8%BB%E9%A2%98"><span class="toc-number">2.</span> <span class="toc-text">2. 安装 Icarus 主题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F%E4%B8%80%EF%BC%9A-%E9%80%9A%E8%BF%87-npm-%E5%AE%89%E8%A3%85"><span class="toc-number">2.1.</span> <span class="toc-text">2.1. 安装方式一： 通过 npm 安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F%E4%BA%8C%EF%BC%9A-%E9%80%9A%E8%BF%87-git-%E5%85%8B%E9%9A%86%E5%AE%89%E8%A3%85"><span class="toc-number">2.2.</span> <span class="toc-text">2.2. 安装方式二： 通过 git 克隆安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-3-%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F%E4%B8%89%EF%BC%9A-%E9%80%9A%E8%BF%87%E5%8E%8B%E7%BC%A9%E5%8C%85%E5%AE%89%E8%A3%85"><span class="toc-number">2.3.</span> <span class="toc-text">2.3. 安装方式三： 通过压缩包安装</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%85%8D%E7%BD%AE-Icarus-%E4%B8%BB%E9%A2%98"><span class="toc-number">3.</span> <span class="toc-text">3. 配置 Icarus 主题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-%E5%90%AF%E7%94%A8%E4%B8%BB%E9%A2%98"><span class="toc-number">3.1.</span> <span class="toc-text">3.1. 启用主题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-2-%E9%AA%8C%E8%AF%81%E4%B8%BB%E9%A2%98"><span class="toc-number">3.2.</span> <span class="toc-text">3.2. 验证主题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-3-%E9%85%8D%E7%BD%AE%E4%BD%9C%E8%80%85%E8%B5%84%E6%96%99%E5%8D%A1"><span class="toc-number">3.3.</span> <span class="toc-text">3.3. 配置作者资料卡</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-4-%E9%85%8D%E7%BD%AE%E5%8F%8B%E7%AB%99%E9%93%BE%E6%8E%A5"><span class="toc-number">3.4.</span> <span class="toc-text">3.4. 配置友站链接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-5-%E9%85%8D%E7%BD%AE%E6%9C%80%E6%96%B0%E6%96%87%E7%AB%A0"><span class="toc-number">3.5.</span> <span class="toc-text">3.5. 配置最新文章</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-6-%E9%85%8D%E7%BD%AE%E6%96%87%E7%AB%A0%E5%BD%92%E6%A1%A3"><span class="toc-number">3.6.</span> <span class="toc-text">3.6. 配置文章归档</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-7-%E9%85%8D%E7%BD%AE%E6%96%87%E7%AB%A0%E5%88%86%E7%B1%BB"><span class="toc-number">3.7.</span> <span class="toc-text">3.7. 配置文章分类</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-8-%E9%85%8D%E7%BD%AE%E6%96%87%E7%AB%A0%E6%A0%87%E7%AD%BE"><span class="toc-number">3.8.</span> <span class="toc-text">3.8. 配置文章标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-9-%E5%BC%80%E5%90%AF-shareThis-%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE"><span class="toc-number">3.9.</span> <span class="toc-text">3.9. 开启 shareThis 分享按钮</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-10-%E5%BC%80%E5%90%AF-follow-it"><span class="toc-number">3.10.</span> <span class="toc-text">3.10. 开启 follow.it</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-11-%E5%BC%80%E5%90%AF%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F"><span class="toc-number">3.11.</span> <span class="toc-text">3.11. 开启评论系统</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-11-1-utterances"><span class="toc-number">3.11.1.</span> <span class="toc-text">3.11.1. utterances</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E5%90%AF%E7%AB%99%E5%86%85%E6%90%9C%E7%B4%A2"><span class="toc-number">4.</span> <span class="toc-text">开启站内搜索</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E6%94%AF%E6%8C%81%E5%A4%9C%E9%97%B4%E6%A8%A1%E5%BC%8F"><span class="toc-number">5.</span> <span class="toc-text">4. 支持夜间模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E6%B7%BB%E5%8A%A0%E7%9B%B8%E5%85%B3%E6%96%87%E7%AB%A0%E6%8E%A8%E5%BB%BA"><span class="toc-number">6.</span> <span class="toc-text">5. 添加相关文章推建</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#5-1-%E9%A6%96%E5%85%88%E5%AE%89%E8%A3%85-hexo-related-popular-posts-%E4%BE%9D%E8%B5%96"><span class="toc-number">6.1.</span> <span class="toc-text">5.1. 首先安装 hexo-related-popular-posts 依赖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-2-%E4%BF%AE%E6%94%B9-icarus-%E4%B8%BB%E9%A2%98%E6%BA%90%E7%A0%81"><span class="toc-number">6.2.</span> <span class="toc-text">5.2. 修改 icarus 主题源码</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E6%B7%BB%E5%8A%A0-google-%E5%B9%BF%E5%91%8A"><span class="toc-number">7.</span> <span class="toc-text">6. 添加 google 广告</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-hexo-Icarus%E4%B8%BB%E9%A2%98%E4%BC%98%E5%8C%96"><span class="toc-number">8.</span> <span class="toc-text">7. hexo Icarus主题优化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E8%A7%A3%E5%86%B3-SEO-LCP-%E9%97%AE%E9%A2%98"><span class="toc-number">9.</span> <span class="toc-text">8. 解决 SEO LCP 问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E5%8F%82%E8%80%83%E6%96%87%E6%A1%A3"><span class="toc-number">10.</span> <span class="toc-text">8. 参考文档</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%B8%E5%85%B3%E6%96%87%E7%AB%A0"><span class="toc-number">11.</span> <span class="toc-text">相关文章</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2025/01/05/other-%E9%9A%8F%E7%AC%94-icarus-%E4%B8%BB%E9%A2%98%E5%AE%89%E8%A3%85/" title="Hexo 配置 Icarus 主题"><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-4.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Hexo 配置 Icarus 主题"/></a><div class="content"><a class="title" href="/2025/01/05/other-%E9%9A%8F%E7%AC%94-icarus-%E4%B8%BB%E9%A2%98%E5%AE%89%E8%A3%85/" title="Hexo 配置 Icarus 主题">Hexo 配置 Icarus 主题</a><time datetime="2025-01-05T08:25:00.000Z" title="发表于 2025-01-05 16:25:00">2025-01-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2024/03/18/other-leetcode-%E3%80%902024-03-18-LeetCode-%E5%88%B7%E9%A2%98-400%E9%81%93%E6%89%93%E5%8D%A1%E3%80%91/" title="LeetCode刷题400道打卡"><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-9.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="LeetCode刷题400道打卡"/></a><div class="content"><a class="title" href="/2024/03/18/other-leetcode-%E3%80%902024-03-18-LeetCode-%E5%88%B7%E9%A2%98-400%E9%81%93%E6%89%93%E5%8D%A1%E3%80%91/" title="LeetCode刷题400道打卡">LeetCode刷题400道打卡</a><time datetime="2024-03-17T16:00:00.000Z" title="发表于 2024-03-18 00:00:00">2024-03-18</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2024/01/04/2024-01-05%20%E5%A4%9A%E6%A8%A1%E6%80%81%E6%A8%A1%E5%9E%8B%E7%BB%BC%E8%BF%B0/" title="多模态基础模型：从专家到通用助理"><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-7.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="多模态基础模型：从专家到通用助理"/></a><div class="content"><a class="title" href="/2024/01/04/2024-01-05%20%E5%A4%9A%E6%A8%A1%E6%80%81%E6%A8%A1%E5%9E%8B%E7%BB%BC%E8%BF%B0/" title="多模态基础模型：从专家到通用助理">多模态基础模型：从专家到通用助理</a><time datetime="2024-01-04T14:42:08.000Z" title="发表于 2024-01-04 22:42:08">2024-01-04</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/12/30/%E6%A0%A1%E5%9B%AD%E7%BD%91%E8%87%AA%E5%8A%A8%E7%99%BB%E5%BD%95%E8%84%9A%E6%9C%AC/" title="校园网自动登录脚本"><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-9.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="校园网自动登录脚本"/></a><div class="content"><a class="title" href="/2023/12/30/%E6%A0%A1%E5%9B%AD%E7%BD%91%E8%87%AA%E5%8A%A8%E7%99%BB%E5%BD%95%E8%84%9A%E6%9C%AC/" title="校园网自动登录脚本">校园网自动登录脚本</a><time datetime="2023-12-30T09:21:30.000Z" title="发表于 2023-12-30 17:21:30">2023-12-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/11/24/%E5%A4%9A%E6%A8%A1%E6%80%81%E8%AE%BD%E5%88%BA%E8%AF%86%E5%88%AB%E5%9F%BA%E7%BA%BF%E6%A8%A1%E5%9E%8B%E5%A4%8D%E7%8E%B0/" title="多模态讽刺识别基线模型复现"><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-10.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="多模态讽刺识别基线模型复现"/></a><div class="content"><a class="title" href="/2023/11/24/%E5%A4%9A%E6%A8%A1%E6%80%81%E8%AE%BD%E5%88%BA%E8%AF%86%E5%88%AB%E5%9F%BA%E7%BA%BF%E6%A8%A1%E5%9E%8B%E5%A4%8D%E7%8E%B0/" title="多模态讽刺识别基线模型复现">多模态讽刺识别基线模型复现</a><time datetime="2023-11-24T08:51:18.000Z" title="发表于 2023-11-24 16:51:18">2023-11-24</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2022 - 2025 By David</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener external nofollow noreferrer" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><a href="http://www.beian.gov.cn/portal/registerSystemInfo" rel="external nofollow noreferrer" target="_blank"> <img style="vertical-align:middle; width:20px; " src="https://cdn.jsdelivr.net/gh/David-deng-01/images/blog/icp.png"> 赣公网安备36082302000135号</a> <a href="https://beian.miit.gov.cn/" rel="external nofollow noreferrer" id="beian"  target="_blank">赣ICP备2023013705号-1</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><div class="js-pjax"></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>